import { useLocation, useHistory } from "react-router-dom";
import { useState, useEffect, useContext } from "react";
import { Context } from "../index.jsx"; //导入父组件中的CreateContext对象
import "./index.less";

export const SongListTop = () => {
  const [SongList, SetSongList] = useState({});
  const History = useHistory();
  const res = useContext(Context); //接受父组件的传值
  useEffect(() => {
    if (Object.keys(SongList).length === 0) {
      //判断状态对象中是否有数据，防止多次渲染
      SetSongList(res.SongList); //渲染数据
      return;
    }
  });
  return (
    <>
      <div>
        <div className="SongListTop">
          <div
            onClick={() => {
              History.go(-1);
            }}
          >
            <img src={SongList?.coverImgUrl} alt="" />
            <svg
              t="1637290744121"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1267"
              width="200"
              height="200"
            >
              <path
                d="M513.753 64.947c-238.627 0-432.77 196.2-432.77 437.351 0 241.153 194.143 437.353 432.77 437.353 238.627 0 432.772-196.202 432.772-437.353 0-241.15-194.143-437.351-432.772-437.351z m0 820.035c-208.804 0-378.675-171.665-378.675-382.684 0-211.013 169.871-382.68 378.675-382.68S892.43 291.285 892.43 502.298c0 211.02-169.871 382.684-378.677 382.684z m216.385-410.017H362.666L478.782 357.62c10.563-10.677 10.563-27.976 0-38.654a26.849 26.849 0 0 0-38.251 0l-162.288 164.01c-10.567 10.675-10.567 27.975 0 38.651l162.288 164.012c5.283 5.337 12.205 8.004 19.124 8.004 6.924 0 13.841-2.667 19.127-8.004 10.563-10.679 10.563-27.974 0-38.654l-116.116-117.35h367.472c14.953 0 27.047-12.225 27.047-27.336 0-15.107-12.092-27.333-27.047-27.333z"
                p-id="1268"
              ></path>
            </svg>
            <span>歌单</span>
          </div>
          <div>
            <svg
              t="1637290766405"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1398"
              width="200"
              height="200"
            >
              <path
                d="M474.453333 884.053333c-225.28 0-409.6-184.32-409.6-409.6s184.32-409.6 409.6-409.6 409.6 184.32 409.6 409.6-184.32 409.6-409.6 409.6z m0-68.266666c187.733333 0 341.333333-153.6 341.333334-341.333334s-153.6-341.333333-341.333334-341.333333-341.333333 153.6-341.333333 341.333333 153.6 341.333333 341.333333 341.333334z m252.586667 54.613333c-13.653333-13.653333-10.24-37.546667 3.413333-47.786667s37.546667-10.24 47.786667 3.413334l64.853333 78.506666c13.653333 13.653333 10.24 37.546667-3.413333 47.786667s-37.546667 10.24-47.786667-3.413333l-64.853333-78.506667z"
                p-id="1399"
              ></path>
            </svg>
            <svg
              t="1637290831420"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1529"
              width="200"
              height="200"
            >
              <path
                d="M512.12288 0.43008c59.12064 0 108.38016 49.26464 108.38016 108.38528s-49.26464 108.3904-108.38016 108.3904c-59.12064 0-108.39552-49.27488-108.39552-108.3904C403.73248 49.69472 453.00736 0.43008 512.12288 0.43008z m0 400.71168c59.12064 0 108.38016 49.26464 108.38016 108.38528 0 59.13088-49.26464 108.3904-108.38016 108.3904-59.12064 0-108.39552-49.26464-108.39552-108.3904s49.28-108.38528 108.39552-108.38528z m0 400.71168c59.12064 0 108.38016 49.27488 108.38016 108.38528 0 59.13088-49.26464 108.39552-108.38016 108.39552-59.12064 0-108.39552-49.26976-108.39552-108.39552 0.00512-59.1104 49.28-108.38528 108.39552-108.38528z m0 0"
                p-id="1530"
              ></path>
            </svg>
          </div>
        </div>
        <div className="SongList_details">
          <div className="SongList_details_img">
            <img src={SongList?.coverImgUrl} alt="" />
            <span>{(SongList?.playCount % 10000) + "万"}</span>
          </div>
          <div className="SongList_details_text">
            <h1>{SongList?.name}</h1>
            <div className="author">
              <div>
                <img src={SongList.creator?.avatarUrl} alt="" />
                <span>{SongList.creator?.nickname}</span>
              </div>
              <p>{SongList.description}</p>
            </div>
          </div>
        </div>

        <div className="iconList">
          <div className="iconItems">
            <svg
              t="1634461234756"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="4130"
              width="200"
              height="200"
            >
              <path
                d="M821.333333 800H547.584l-86.464 96.074667a32 32 0 1 1-47.573333-42.816l96-106.666667A32 32 0 0 1 533.333333 736h288a53.333333 53.333333 0 0 0 53.333334-53.333333V234.666667a53.333333 53.333333 0 0 0-53.333334-53.333334H202.666667a53.333333 53.333333 0 0 0-53.333334 53.333334v448a53.333333 53.333333 0 0 0 53.333334 53.333333h138.666666a32 32 0 0 1 0 64H202.666667c-64.8 0-117.333333-52.533333-117.333334-117.333333V234.666667c0-64.8 52.533333-117.333333 117.333334-117.333334h618.666666c64.8 0 117.333333 52.533333 117.333334 117.333334v448c0 64.8-52.533333 117.333333-117.333334 117.333333zM704 341.333333a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h384zM512 512a32 32 0 0 1 0 64H320a32 32 0 0 1 0-64h192z"
                p-id="4131"
              ></path>
            </svg>
            <span>{SongList.commentCount}</span>
          </div>
          <div className="iconItems">
            <svg
              t="1634460813570"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1709"
              width="200"
              height="200"
            >
              <path
                d="M768.73106 703.537712c-35.606921 0-67.945574 14.793214-91.167479 38.359147l-309.109357-171.670082c9.116748-17.545439 14.621199-37.155048 14.621199-58.312783 0-12.55703-2.408198-24.426004-5.676466-35.950949l304.63699-189.215522c22.705863 20.469679 52.464304 33.198723 85.146985 33.198723 70.525785 0 127.978498-57.452713 127.978498-127.978498S837.708718 63.989249 767.182933 63.989249s-127.978498 57.452713-127.978498 127.978498c0 14.621199 2.92424 28.382328 7.396607 41.455401L344.716278 420.746514c-23.049891-22.705863-54.700487-36.983034-89.791366-36.983034-70.525785 0-127.978498 57.452713-127.978498 127.978498s57.452713 127.978498 127.978498 127.978498c25.630102 0 49.540064-7.740635 69.493701-20.813707l321.150344 178.378633c-3.096254 11.008903-5.160423 22.18982-5.160423 34.058794 0 70.525785 57.452713 127.978498 127.978498 127.978498s127.978498-57.452713 127.978498-127.978498S839.256845 703.537712 768.73106 703.537712zM767.182933 127.978498c35.262893 0 63.989249 28.726356 63.989249 63.989249s-28.726356 63.989249-63.989249 63.989249-63.989249-28.726356-63.989249-63.989249S731.92004 127.978498 767.182933 127.978498zM191.107677 511.913993c0-35.262893 28.726356-63.989249 63.989249-63.989249s63.989249 28.726356 63.989249 63.989249-28.726356 63.989249-63.989249 63.989249S191.107677 547.176886 191.107677 511.913993zM768.73106 895.505459c-35.262893 0-63.989249-28.726356-63.989249-63.989249s28.726356-63.989249 63.989249-63.989249 63.989249 28.726356 63.989249 63.989249C832.720309 866.951117 803.993953 895.505459 768.73106 895.505459z"
                p-id="1710"
              ></path>
            </svg>
            <span>{SongList.shareCount}</span>
          </div>
          <div className="iconItems">
            <svg
              t="1634460826829"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="1845"
              width="200"
              height="200"
            >
              <path
                d="M828.975746 894.125047 190.189132 894.125047c-70.550823 0-127.753639-57.18542-127.753639-127.752616L62.435493 606.674243c0-17.634636 14.308891-31.933293 31.93227-31.933293l63.889099 0c17.634636 0 31.93227 14.298658 31.93227 31.933293l0 95.821369c0 35.282574 28.596292 63.877843 63.87682 63.877843L765.098927 766.373455c35.281551 0 63.87682-28.595268 63.87682-63.877843l0-95.821369c0-17.634636 14.298658-31.933293 31.943526-31.933293l63.877843 0c17.634636 0 31.933293 14.298658 31.933293 31.933293l0 159.699212C956.729385 836.939627 899.538849 894.125047 828.975746 894.125047L828.975746 894.125047zM249.938957 267.509636c12.921287-12.919241 33.884738-12.919241 46.807049 0l148.97087 148.971893L445.716876 94.89323c0-17.634636 14.300704-31.94762 31.933293-31.94762l63.875796 0c17.637706 0 31.945573 14.312984 31.945573 31.94762l0 321.588299 148.97087-148.971893c12.921287-12.919241 33.875528-12.919241 46.796816 0l46.814212 46.818305c12.921287 12.922311 12.921287 33.874505 0 46.807049L552.261471 624.930025c-1.140986 1.137916-21.664416 13.68365-42.315758 13.69286-20.87647 0.010233-41.878806-12.541641-43.020816-13.69286L203.121676 361.13499c-12.922311-12.933567-12.922311-33.884738 0-46.807049L249.938957 267.509636 249.938957 267.509636z"
                p-id="1846"
              ></path>
            </svg>
            <span>下载</span>
          </div>
          <div className="iconItems">
            <svg
              t="1634460865141"
              className="icon"
              viewBox="0 0 1024 1024"
              version="1.1"
              xmlns="http://www.w3.org/2000/svg"
              p-id="3307"
              width="200"
              height="200"
            >
              <path
                d="M806.062 130.314H216.238c-48.181 0-87.381 39.2-87.381 87.381v589.824c0 48.181 39.2 87.381 87.381 87.381h589.824c48.181 0 87.381-39.2 87.381-87.381V217.695c0-48.181-39.2-87.381-87.381-87.381z m-62.623 243.818L463.212 654.359c-11.286 11.286-29.855 11.286-41.142 0L278.861 511.15c-11.286-11.286-11.286-29.855 0-41.142s29.855-11.286 41.142 0l122.576 122.576 259.596-259.596c11.286-11.286 29.855-11.286 41.142 0 11.53 11.286 11.53 29.733 0.122 41.142z"
                p-id="3308"
              ></path>
            </svg>
            <span>多选</span>
          </div>
        </div>
      </div>
    </>
  );
};
